import { useStore, observer } from '../../store'
import { Avatar, Dropdown, Menu, MenuProps } from 'antd'
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

function LayoutToolbar () {
  const { userStore } = useStore()
  const navigate = useNavigate()
  const menuItems: MenuProps['items'] = [{
    label: '个人中心',
    key: 'userCenter',
    icon: <UserOutlined />
  }, {
    label: '个人设置',
    key: 'userSettings',
    icon: <SettingOutlined />
  }, {
    type: 'divider'
  }, {
    label: '注销登录',
    key: 'logout',
    icon: <LogoutOutlined />
  }]

  const handleSelectMenuItem = async (key: string) => {
    switch (key) {
      case 'userCenter':
        break
      case 'userSettings':
        break
      case 'logout':
        await userStore.logout()
        navigate('/login', { replace: true })
        break
    }
  }

  return (
    <div className="admin-toolbar">
      <Dropdown
        overlay={
          <Menu items={menuItems} onClick={({ key }) => handleSelectMenuItem(key)} />
        }
      >
        <div className="admin-toolbar__user">
          <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
          <span className="admin-toolbar__username">{userStore.userInfo.userName}</span>
        </div>
      </Dropdown>
    </div>
  )
}

export default observer(LayoutToolbar)
